<template>
  <div class="traveler-eidt-poup">
    <!--出行人添加/编辑弹窗-->
    <van-popup
      overlay-class="bg-white"
      v-model="show"
      close-icon="close"
      position="bottom"
      :style="{height:'100%', background:'#f5f5f5'}"
    >
      <div class="traveler-edit">
        <nav-bar 
          :title="title" 
          left-arrow 
          :isWeChatHide="false"
          @clickLeft="closeEditTraveler"

        />
        <div class="mod-box">
          <van-cell-group>
            <van-field
              v-model="name"
              label="姓名"
              placeholder="须与证件上的名字一致"
              error-message=""
            >
            </van-field>

            <!-- <van-field
              v-model="phone"
              type="tel"
              label="手机号码"
              maxlength="11"
              placeholder="请填写手机号"
              error-message=""
            /> -->

            <div class="van-cell van-field">
              <div class="van-cell__title van-field__label card-name" @click="showPicker = true" >
                  <span :identity_name="identity_name">{{identity_name}}</span>
                  <van-icon slot="right-icon" class-prefix="ucai-icon" name="xiasanjiao"/>
              </div>
              <div class="van-field__body">
                  <input type="text" maxlength="18" placeholder="请填写证件号码" class="van-field__control" v-model="identity_code">
              </div>
            </div>

            <van-switch-cell v-model="commonly" title="设为常用信息" />
          </van-cell-group>
        </div>

        <div class="btn-save">
            <van-button type="primary" size="large" @click="travelerSave">完成</van-button>
            <div class="text-right" v-if="id>0"><a href="javascript:;" @click="travelerItemDel">删除{{traveler_type_name}}</a></div>
        </div>
        
      </div>
    </van-popup>

    <!--证件选择弹窗-->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        :default-index="1"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>

  </div>
</template>

<script>
	import { 
    Icon,
    Button,
    Popup,
    Field,
    CellGroup,
    SwitchCell,
    Picker,
    Dialog,
    Toast,
  } from "vant"
  import Vue from 'vue';
  import NavBar from "@cmpt/header/navbar"
  import {
    travelerEdit,
    travelerDel,
    getTravelersList,
  } from "@/api/modules/booking";
  export default {
    name: "traveler-edit-popup",
    data(){
        return {
            showPicker:false,
            columns: this.id_name_list, //证件类型
            kind_list: this.id_key_list,

            id:this.eidt_id,
            name:this.eidt_name,
            phone:this.eidt_phone,
            identity_name:this.eidt_identity_name,
            identity_kind:this.eidt_identity_kind,
            identity_code:this.eidt_identity_code,
            commonly:this.eidt_commonly,
        }
    },

    components:{
      [Icon.name]: Icon,
      [Button.name]: Button,
      [Popup.name]: Popup,
      [NavBar.name]: NavBar,
      [Field.name]: Field,
      [CellGroup.name]: CellGroup,
      [SwitchCell.name]: SwitchCell,
      [Picker.name]: Picker,
      [Dialog.name]: Dialog,
      [Toast.name]: Toast,
    },

    props: {
      traveler_type_name:{
        type: String
      },
      travelersList:{
        type: Array
      },
      selected_traveler:{
        type: Array
      },
      traveler_index:{
        type: Number
      },
      lastNum:{
        type: Number
      },
      show: {
        type: Boolean
      },
      title: {
        type: String
      },
      eidt_id:{
        type: String
      },
      eidt_name:{
        type: String
      },
      eidt_phone:{
        type: String
      },
      eidt_identity_name: {
        type: String
      },
      eidt_identity_kind: {
        type: String
      },
      eidt_identity_code: {
        type: String
      },
      eidt_commonly:{
        type: Boolean
      },
      id_name_list:{
        type: Array
      },
      id_key_list:{
        type: Array
      }
    },

    watch:{
      eidt_id(newVal){
        this.id = newVal;
      },
      eidt_name(newVal){
        this.name = newVal;
      },
      eidt_phone(newVal){
        this.phone = newVal;
      },
      eidt_identity_name(newVal){
        this.identity_name = newVal;
      },
      eidt_identity_kind(newVal){
        this.identity_kind = newVal;
      },
      eidt_identity_code(newVal){
        this.identity_code = newVal;
      },
      eidt_commonly(newVal){
        this.commonly = newVal;
      },
      id_name_list(newVal) {
        this.columns = newVal;
      },
      id_key_list(newVal) {
        this.kind_list = newVal;
      },
    },

    methods:{
        //关闭编辑弹窗
        closeEditTraveler(){
          this.$emit('update:show', false);
        },

        //删除联系人
        travelerItemDel(){
          Dialog.confirm({
            message: '确定要删除该联系人？'
          }).then(() => {
      
            travelerDel(this.id)
              .then(res => {
                if(res.code==200){
                  let index = this.travelersList.findIndex(item => Number(item.id) === Number(this.id));
                  this.travelersList.splice(index,1);//更新出行人列表
                  if(this.selected_traveler[this.traveler_index].length){
                     let selected_index = this.selected_traveler[this.traveler_index].findIndex(item => Number(item.id) === Number(this.id));
                     this.selected_traveler[this.traveler_index].splice(index,1);//更新选择项
                  }
                  this.$emit('update:show', false);
                }
              })

          }).catch(() => {
            // on cancel
          });
        },

        //保存联系人
        travelerSave(){
          let eidtInfo = {
              "id": this.id,
              "name": this.name, 
              "phone": this.phone, 
              "identity_kind": this.identity_kind,
              "identity_code": this.identity_code,
              "is_default": this.commonly ? 1 : 0,
          };

          let nameReg   = /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/;
          let phoneReg  = /^1[3-578]\d{9}$/;
          let idCardReg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;

          if(!eidtInfo.name){
            Toast("请填写联系人");
            return;
          }
          else if(!nameReg.test(eidtInfo.name)){
            Toast("请填写真实姓名");
            return;
          }
          // else if(!eidtInfo.phone){
          //   Toast("请填写手机号码");
          //   return;
          // }
          // else if(!phoneReg.test(eidtInfo.phone)){
          //   Toast("请填写正确的手机号码");
          //   return;
          // }
          else if(eidtInfo.identity_kind=="0" && (!idCardReg.test(eidtInfo.identity_code))){
            Toast("请填写正确的身份证号码");
            return;
          }
          
          travelerEdit(eidtInfo)
            .then(res => {
              this.$emit('update:show', false);

              //重新获取联系人列表
              getTravelersList()
                  .then(res => {

                    let new_traveler_list = res.data.traveler_list;
                    this.travelersList.splice(0,this.travelersList.length);
                    this.travelersList.push(...new_traveler_list);
                
                    //更新选择列表
                    //编辑
                    if(Number(this.id)){
                        if(this.selected_traveler[this.traveler_index].length){
                          let index = this.selected_traveler[this.traveler_index].findIndex(item => Number(item.id) === Number(this.id));
                          if(index>=0){
                            this.selected_traveler[this.traveler_index][index].name = eidtInfo.name;
                            this.selected_traveler[this.traveler_index][index].phone = eidtInfo.phone;
                            this.selected_traveler[this.traveler_index][index].identity[0].kind = eidtInfo.identity_kind;
                            this.selected_traveler[this.traveler_index][index].identity[0].name = this.identity_name;
                            this.selected_traveler[this.traveler_index][index].identity[0].code = eidtInfo.identity_code;
                            this.selected_traveler[this.traveler_index][index].is_default = eidtInfo.is_default;
                          }
                      }
                        
                    }else{
                      //新增
                      if(this.lastNum){
                          let temp_arr = JSON.parse(JSON.stringify(this.travelersList));
                          let add_arr = temp_arr.splice(this.travelersList.length-1,1);
                          add_arr[0]['active'] = true;
                          this.selected_traveler[this.traveler_index].push(add_arr[0]);
                      }

                      //重置已新增的数据
                      this.id = "0";
                      this.name = "";
                      this.phone = "";
                      this.commonly = false;
                      this.identity_name = "身份证";
                      this.identity_kind = "0";
                      this.identity_code = "";
                    }

                    //更新选择项
                    if(this.selected_traveler[this.traveler_index].length){
                      let selected_id = [];
                      this.selected_traveler[this.traveler_index].forEach((v, k) => {
                        selected_id.push(v.id);
                      });

                      this.travelersList.forEach((v, k) => {
                        if(selected_id.indexOf(v.id)!=-1){
                         Vue.set(v,'active',true);
                        }else{
                          Vue.set(v,'active',false);
                        }
                      });
                    }

                  })

            }).catch((e) => {
              //证件类型已存在,暂时就这个吧。。其他统一拦截了
              if(e.data.code==400){
                Toast(e.data.msg);
              }
            });
        },

        //显示证件类型弹窗
        selectCard(){
          this.showPicker = true;
        },

        onConfirm(value) {
          const index = this.id_name_list.findIndex(item => item === value);
          this.identity_name = value;
          this.identity_kind = this.id_key_list[index];
          this.showPicker = false;
        }
    }
  }
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
.van-field__body{
  width: 100%;
}
.van-hairline--top-bottom::after {
  border: none;
  transform: scale(1);
}
.mod-box{
  background: #fff;
  border-radius: 5px;
  margin: 10px;
  h3{
    padding-left: 16px;
    font-size: 16px;
    line-height: 48px;
    span{
      color: #999;
      font-size: 12px;
      font-weight: 400;
      margin-left: 10px;
    }
  }

}

.traveler-edit{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  .card-name{
    color: @color-main;
  }

  .btn-save{
    margin: 0 16px;
    padding-top: 10px;
    button{
      margin-bottom: 20px;
    }
    a{
      font-size: 15px;
    }
  }
}
</style>